<template>
  <div id="progress">
    <div id="progress-box">
      <div v-for="count in length" class="progressItem" :class="{'gray':count-1!=flag,'black':count-1==flag}"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Progress",
    props: {
      length: Number,
      flag: Number
    }
  }
</script>

<style scoped>
  #progress {
    position: absolute;
    bottom: 5px;
    left: 50%;
  }

  #progress-box {
    position: relative;
    left: -50%;
    display: flex;
    width: 80px;
    height: 20px;
  }

  .progressItem {
    width: 6px;
    height: 6px;
    margin: auto;
    border-radius: 50%;
  }

  .black {
    background-color: black;
  }

  .gray {
    background-color: gray;
  }
</style>